<template>
    <div class="main-for-myroom">
        <el-tabs :tab-position="tabPosition">
            <el-tab-pane label="我的主页">
                <div class="message">
                    <div>
                        <span class="title">个人信息</span>
                        <div class="message-main">
                            <div class="message-in">
                                <span class="message-title">昵称&nbsp;</span>
                                <el-button type="text" @click="nickNameVisible = true"><span
                                        class="message-title-change">修改</span></el-button>
                                <el-dialog
                                        title="提示"
                                        :visible.sync="nickNameVisible"
                                        width="520px"
                                >
                                    <div slot="title">修改昵称</div>
                                    <input type="text" placeholder="请输入昵称" v-model="newNickname">
                                    <div slot="footer">
                                        <button class="greenBotton" @click="updataNickname"
                                                :disabled="disabledForNickName">{{nickNameBtn}}
                                        </button>
                                        <button class="normalBotton" @click="nickNameVisible = false">取消</button>
                                    </div>
                                </el-dialog>
                                <p>{{$store.state.isLogin?$store.state.userMessage.nickname:"默认昵称"}}</p>
                            </div>
                            <div class="message-in">
                                <span class="message-title">手机号称</span>
                                <el-button type="text" @click="phoneVisible = true"><span class="message-title-change">修改</span>
                                </el-button>
                                <el-dialog
                                        title="提示"
                                        :visible.sync="phoneVisible"
                                        width="520px"
                                >
                                    <div slot="title">修改手机</div>
                                    <input type="text" placeholder="请输入手机" v-model="newPhone">
                                    <input type="text" placeholder="请输入验证码" v-model="newCode">
                                    <button class="get-codebutton" @click="getCode" :disabled="disabledForPhoneCode">{{textForChangPhone}}</button>
                                    <div slot="footer">
                                        <button class="greenBotton" @click="updatePhone" :disabled="disabledForPhone">{{textForPhone}}</button>
                                        <button class="normalBotton" @click="phoneVisible = false">取消</button>
                                    </div>
                                </el-dialog>
                                <p>{{$store.state.isLogin?$store.state.userMessage.mobile:"默认手机号"}}</p>
                            </div>
                            <div class="message-in">
                                <span class="message-title">密码&nbsp;</span>
                                <el-button type="text" @click="pswVisible = true"><span
                                        class="message-title-change">修改</span></el-button>
                                <el-dialog
                                        title="提示"
                                        :visible.sync="pswVisible"
                                        width="520px"
                                >
                                    <div slot="title">修改密码</div>
                                    <input type="text" placeholder="旧密码" v-model="oldPsw">
                                    <input type="text" placeholder="新密码" v-model="newPsw">
                                    <input type="text" placeholder="再次输入新密码" v-model="newPswAgain">
                                    <input type="text" placeholder="手机号" v-model="phoneForPsw">
                                    <input type="text" placeholder="验证码" class="hanf-input" v-model="codeForPsw">
                                    <button class="get-codebutton" @click="getCodeforPsw" :disabled="disabledForNewPswCode">{{textForChangPswCode}}</button>
                                    <div slot="footer">
                                        <button class="greenBotton" @click="updataPsw" :disabled="disabledForNewPsw">{{textForChangPsw}}</button>
                                        <button class="normalBotton" @click="pswVisible = false">取消</button>
                                    </div>
                                </el-dialog>
                                <p>******</p>
                            </div>
                            <div>
                                <el-upload
                                        class="avatar-uploader"
                                        action="/api/pcUser/updata/userAvatar"
                                        :show-file-list="false"
                                        :on-success="handleAvatarSuccess"
                                        :before-upload="beforeAvatarUpload">
                                    <img :src="imageUrl||$store.state.userMessage.avatarUrl" class="avatar">
<!--                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
                                </el-upload>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="我的课程">
                <div style="color: #fadd0f;font-size: 25px;padding: 40px;cursor: pointer"><span
                        class="el-icon-lock"></span>请充值vip解锁
                </div>
            </el-tab-pane>
            <el-tab-pane label="我的订单">
                <div style="color: #fadd0f;font-size: 25px;padding: 40px;cursor: pointer"><span
                        class="el-icon-lock"></span>请充值vip解锁
                </div>
            </el-tab-pane>

        </el-tabs>
    </div>
</template>

<script>
    import {changeNickname, changePhone, codeForChangePsw, changePsw} from "../../../api/updataMessage";
    import {appAll} from "../../../api/appAll";
    import {codeForChangePhone} from "../../../api/updataMessage";

    export default {
        name: "mainForMyroom",
        data() {
            return {
                tabPosition: 'left',
                //    弹窗控制
                nickNameVisible: false,
                phoneVisible: false,
                pswVisible: false,
                //    新昵称
                newNickname: "",
                newPhone: "",
                newCode: "",
                //    新密码
                oldPsw: "",
                newPsw: "",
                newPswAgain: "",
                phoneForPsw: "",
                codeForPsw: "",
                //    上传图片
                imageUrl: '',

                //    按钮禁用相关
                //     昵称的
                nickNameBtn: "确认",
                disabledForNickName: false,
            //    手机验证码
                textForChangPhone:"获取验证码",
                disabledForPhoneCode:false,
            //    手机修改
                disabledForPhone:false,
                textForPhone:"确认",
            //    密码修改的验证码
                textForChangPswCode:"获取验证码",
                disabledForNewPswCode:false,
                //获取更改密码
                textForChangPsw:"获取验证码",
                disabledForNewPsw:false,
            }
        },
        methods: {
            //修改昵称
            updataNickname() {
                changeNickname(this.newNickname).then(res => {
                    console.log(res)
                    this.nickNameVisible = false
                    appAll().then(res => {
                        console.log(res.userInfo)
                        this.$store.commit("newMessage", res.userInfo)
                    })
                    let time = 30
                    let timedown = setInterval(() => {
                            this.nickNameBtn = `暂时不可用(${time--})`
                        }
                        , 1000)

                    this.disabledForNickName = true
                    setTimeout(() => {
                        clearTimeout(timedown)
                        this.nickNameBtn = "确认"
                        this.disabledForNickName = false
                    }, 30000)
                })
            },
            //修改手机的验证码
            getCode() {
                codeForChangePhone(this.newPhone).then(res => {
                    console.log(res)
                    let time = 30
                    let timedown = setInterval(() => {
                            this.textForChangPhone = `暂时不可用(${time--})`
                        }
                        , 1000)

                    this.disabledForPhoneCode = true
                    setTimeout(() => {
                        clearTimeout(timedown)
                        this.textForChangPhone = "获取验证码"
                        this.disabledForPhoneCode = false
                    }, 30000)
                })
            },
            //修改手机号
            updatePhone() {
                changePhone(this.newPhone, this.newCode).then(res => {
                    console.log(res)
                    this.phoneVisible = false
                    appAll().then(res => {
                        console.log(res.userInfo)
                        this.$store.commit("newMessage", res.userInfo)
                    })
                    let time = 30
                    let timedown = setInterval(() => {
                            this.textForPhone = `暂时不可用(${time--})`
                        }
                        , 1000)

                    this.disabledForPhone = true
                    setTimeout(() => {
                        clearTimeout(timedown)
                        this.textForPhone = "确认"
                        this.disabledForPhone = false
                    }, 30000)
                })
            },
            //修改密码的验证码
            getCodeforPsw() {
                codeForChangePsw(this.phoneForPsw).then(res => {
                    console.log(res)
                })
                let time = 30
                let timedown = setInterval(() => {
                        this.textForChangPswCode = `暂时不可用(${time--})`
                    }
                    , 1000)

                this.disabledForNewPswCode = true
                setTimeout(() => {
                    clearTimeout(timedown)
                    this.textForChangPswCode = "确认"
                    this.disabledForNewPswCode = false
                }, 30000)
            },
            updataPsw() {
                var dataForNewPsw = new URLSearchParams()
                dataForNewPsw.append('oldPassword', this.oldPsw)
                dataForNewPsw.append('newPassword', this.newPsw)
                dataForNewPsw.append('checkNewPassword', this.newPswAgain)
                dataForNewPsw.append('mobile', this.phoneForPsw)
                dataForNewPsw.append('code', this.codeForPsw)
                changePsw(dataForNewPsw).then(res => {
                    console.log(res)
                    this.pswVisible = false
                })
                let time = 30
                let timedown = setInterval(() => {
                        this.textForChangPsw = `暂时不可用(${time--})`
                    }
                    , 1000)

                this.disabledForNewPsw = true
                setTimeout(() => {
                    clearTimeout(timedown)
                    this.textForChangPsw = "确认"
                    this.disabledForNewPsw = false
                }, 30000)
            },
            //上传头像

            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                appAll().then(res => {
                    console.log(res.userInfo)
                    this.$store.commit("newMessage", res.userInfo)
                })
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }


    }

</script>

<style scoped lang="less">
    .main-for-myroom {
        width: 1200px;
        background-color: white;
        margin: auto;
        margin-bottom: 20px;
        padding: 20px;
        box-sizing: border-box;
    }

    .message {
        padding-left: 24px;;

        .title {
            font-size: 22px;
            color: rgba(0, 0, 0, 0.65);
        }

        .message-main {
            padding: 40px;
        }
    }

    /*    单独的信息*/
    .message-in {
        padding-top: 20px;

        .message-title {
            font-size: 22px;
            color: #545454;
        }

        .message-title-change {
            color: rgb(0, 207, 140);
            font-size: 14px;
            cursor: pointer;
        }

        p {
            font-size: 22px;
            color: #2f2f2f;
            margin: 20px 0px 25px;
        }

        border-bottom: 1px solid #cecece;
    }

    /deep/ .el-tabs__active-bar {
        background-color: #1fdc5d !important;
    }

    /deep/ .is-active {
        color: #1fdc5d !important;
    }


    /*    弹窗相关                                         */
    /*    两个按钮*/
    .greenBotton,
    .normalBotton {
        height: 32px;
        /*width: 63px;*/
        padding: 0px 10px;
        border: none;
        outline: none;
        margin-left: 10px;
    }

    .greenBotton {
        background-color: #00cf8c;
        color: white;
    }

    .normalBotton {
        border: 1px solid darkgray;
        color: darkgray;
        background-color: white !important;
    }

    .normalBotton:hover {
        border: 1px solid #00cf8c;
        color: #00cf8c;
    }

    /*两个边界线*/
    /deep/ .el-dialog__header {
        border-bottom: 1px solid #e5e5e5;
    }

    /deep/ .el-dialog__body {
        border-bottom: 1px solid #e5e5e5;
    }

    /*按钮修改*/
    /deep/ .el-dialog__body {
        input {
            width: 100%;
            displayin: line-block;
            height: 32px;
            box-sizing: border-box;
            padding-bottom: 4px;
            padding-left11: px;
            padding-right30: px;
            padding-top: 4px;
            font-size: 14px;
            line-height: 21px;
            margin-bottom: 20px;
            padding-left: 12px;
            outline: none;
            border: 1px solid #8fb1a8;
        }

        input:focus {
            border: 1px solid #00cf8c;
            box-shadow: 0px 0px 3px #00cf8c;
        }
    }

    //获取验证码的
    .get-codebutton {
        height: 32px;
        border: none;
        outline: none;
        /*margin-left: 10px;*/
        background-color: #00cf8c;
        color: white;
        padding: 0px 8px;
    }

    //占据半场的input框
    .hanf-input {
        width: 60% !important;
        margin-right: 5%;
    }

    /*    上传头像*/
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>